import {
  Table, Space, Tag, Button,
} from 'antd'
import { useMemo, useCallback, useState } from 'react'
import { postAdminDeleteApi } from '../../../../../api/auth'
import DeleteButton from '../../../../../components/DeleteButton'
import SetRootIdListUpdate from './SetRootIdListUpdate'

const SetRootIdList = (props) => {
  const {
    adminList, loading, getAdminList, handleAdminGroup,
  } = props

  const [open, setOpen] = useState(false)
  const [updateAdminname, setUpdateAdminname] = useState(null)

  const handleDelAdminId = useCallback(async ({ adminid }) => {
    try {
      await postAdminDeleteApi({ adminid })
      getAdminList()
    } catch (error) {
      console.log(error)
    }
  })
  const handleUpdateDetail = useCallback(({ adminname }) => {
    setUpdateAdminname(adminname)
    setOpen(true)
  })

  const columns = useMemo(() => [
    {
      title: 'ID',
      width: 250,
      dataIndex: 'adminid',
      ellipsis: true,
    },
    {
      title: '名字',
      dataIndex: 'adminname',
    },
    {
      title: '角色',
      dataIndex: 'role',
      render: (_) => <Tag color={_ === 2 ? 'magenta' : 'blue'}>{_ === 2 ? '超级管理员' : '管理员'}</Tag>,
    },
    {
      title: '操作',
      render: (_, record) => (
        <>
          <DeleteButton confirm={() => handleDelAdminId(record)} />
          <Button onClick={() => handleUpdateDetail(record)}>编辑</Button>
        </>
      ),
    },
  ], [])
  return (
    <Space direction="vertical" style={{ display: 'flex', padding: '20px' }}>
      <Table
        loading={loading}
        rowKey="adminid"
        dataSource={adminList}
        columns={columns}
      />
      <SetRootIdListUpdate handleAdminGroup={handleAdminGroup} adminname={updateAdminname} open={open} setOpen={setOpen} />
    </Space>
  )
}

export default SetRootIdList
